﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我养你啊!</title>
    <meta content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport" />
    <style>
        *{
          margin:0px;
          padding:0px;
        }
        html,body{
          margin:0px;
          padding: 0px;
          width: 100%;
          height: 100%;
        }
        .stage{      
            perspective: 1200px;         
            width: 100%;
            height: 100%;
            margin: 0px auto;
            perspective-origin: center center;
        }
        .father{
            transition: all 1s ease-in-out;
            transform-style: preserve-3d;
            background-size:cover;
            height: 200px;
            width: 130px;
            position: absolute;
            left:50%;
            top:50%;
            margin-left:-65px;
            margin-top:-100px;
	 
        }      
        .father>img{
            opacity: 0.9;
            height: 200px;
            width: 130px;
            position: absolute;
            vertical-align: middle;
        }
        .imgleft{           transform: rotateY(-90deg)      translateX(-65px);}
        .imgleftfront{      transform: rotateY(-45deg)      translateX(-65px);}
        .imgright{          transform: rotateY(90deg)       translateX(-65px);}
        .imgrightfront{     transform: rotateY(45deg)       translateX(-65px);}
        .imgfront{          transform: rotateY(180deg)      translateX(-65px);}
        .imgleftback{       transform: rotateY(135deg)      translateX(-65px);}
        .imgback{           transform: rotateY(0deg)        translateX(-65px);}
        .imgrightback{      transform: rotateY(225deg)      translateX(-65px);}
    </style>

</head>
<body>
<div class="stage">
    <div class="father">
        <img src="images/a.jpg" class="imgleft pic">
        <img src="images/b.jpg" class="imgleftfront pic">
        <img src="images/c.jpg" class="imgright pic">
        <img src="images/d.jpg" class="imgrightfront pic">
        <img src="images/e.jpg" class="imgfront pic">
        <img src="images/f.jpg" class="imgleftback pic">
        <img src="images/g.jpg" class="imgback pic">
        <img src="images/h.jpg" class="imgrightback pic">
    </div>
</div>
<audio src="music/Light My Fire.ogg"  autoplay  loop></audio>
</body>
     <script>
// 八张图片,每张图片45deg
        var dg=45;
        var father=document.querySelector(".father");
        var pics= document.querySelectorAll(".pic");
        var slide=document.querySelector(".stage");
        var startX = 0,endX = 0,moveX = 0,distanceX = 0,timeOutEvent=0;

// 设置触摸开始监听事件
        slide.addEventListener('touchstart', function(e) {
             startX = e.touches[0].clientX; 
          // 长按500毫秒执行longPress()函数   
             timeOutEvent = setTimeout("longPress()",500);         
             e.preventDefault();   
         });

// 设置触摸移动监听事件
        slide.addEventListener('touchmove',function(e){
           clearTimeout(timeOutEvent); 
           timeOutEvent = 0; 
        })

// 设置触摸结束监听事件
        slide.addEventListener('touchend', function(e) {
          clearTimeout(timeOutEvent);
            endX = e.changedTouches[0].clientX;
            //左右滑动旋转角度
            if ((startX-endX) > 0) {
                 dg-=45;
                document.querySelector(".father").style.transform="rotateY("+dg+"deg)";           
            }else{
                dg+=45;
                document.querySelector(".father").style.transform="rotateY("+dg+"deg)";         
            }
            return false;
       });

// 长按时执行的函数
        function longPress(){ 
            timeOutEvent = 0;     
            for(var i=0;i<pics.length;i++){
            pics[i].style.transition="2s all ease-in-out";
         }
            pics[0].style.transform="rotateY(-90deg)  translateZ(200px)";
            pics[1].style.transform="rotateY(-45deg)  translateZ(200px)";
            pics[2].style.transform="rotateY(90deg)   translateZ(200px)";
            pics[3].style.transform="rotateY(45deg)   translateZ(200px)";
            pics[4].style.transform="rotateY(180deg)  translateZ(200px)";
            pics[5].style.transform="rotateY(135deg)  translateZ(200px)";
            pics[6].style.transform="rotateY(0deg)    translateZ(200px)";
            pics[7].style.transform="rotateY(225deg)  translateZ(200px)";
            // 环形旋转时添加中央图片
            father.style.backgroundImage="url(images/i.jpg)";
      } 

    </script>
</html>